<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户报表</title>
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="echarts/echarts.min.js"></script>
</head>
<body>
<div id="main"
     style="width: 680px;height:450px;margin: 12px auto;padding: 20px;background: #fff;border-radius: 8px"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    let newUserData = null;
    let allUserData = null;
    let timeData = null;

    $.ajax({
        url: "http://localhost/campus/reports/user"
        , type: "GET"
        , async: false
        , success: function (res) {
            newUserData = res.data.newUserList;
            allUserData = res.data.allUserList;
            timeData = res.data.time;
        }
    });

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '每日新增用户曲线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增用户数', '用户总数']
        },
        grid: {
            width: 660
            , height: 420
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: timeData
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '新增用户数',
                type: 'line',
                data: newUserData,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '用户总数',
                type: 'line',
                data: allUserData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
